<template>
	<view>
		<!-- 轮播 -->
		<view class="news" @click="newdetails">
			<FatFatMeng-Swiper :swiperStyleClass="[{'height':'420rpx'},{'background-color':'rgba(0, 0, 0, .2)'}]"
				:list="list">
			</FatFatMeng-Swiper>
		</view>
		<!-- 应用 -->
		<view class="appbox">
			<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small" type="error">
				<view class="box bgc1" @click="oasystem">
					<view class="appicon">
						<image src="../../static/tabbarimg/appiconpic.png" mode=""></image>
					</view>
					<view class="appname">OA</view>
				</view>
			</uni-badge>
			<uni-badge class="uni-badge-left-margin" :text="value2" absolute="rightTop" size="small" type="error">
				<view class="box bgc2">
					<view class="appicon">
						<image src="../../static/tabbarimg/appiconpic.png" mode=""></image>
					</view>
					<view class="appname">云天</view>
				</view>
			</uni-badge>
			<uni-badge class="uni-badge-left-margin" :text="value3" absolute="rightTop" size="small" type="error">
				<view class="box bgc3">
					<view class="appicon">
						<image src="../../static/tabbarimg/appiconpic.png" mode=""></image>
					</view>
					<view class="appname">NC</view>
				</view>
			</uni-badge>
			<uni-badge class="uni-badge-left-margin" :text="value4" absolute="rightTop" size="small" type="error">
				<view class="box bgc2">
					<view class="appicon">
						<image src="../../static/tabbarimg/appiconpic.png" mode=""></image>
					</view>
					<view class="appname">我找车</view>
				</view>
			</uni-badge>
			<uni-badge class="uni-badge-left-margin" :text="value5" absolute="rightTop" size="small" type="error">
				<view class="box bgc3">
					<view class="appicon">
						<image src="../../static/tabbarimg/appiconpic.png" mode=""></image>
					</view>
					<view class="appname">赛马物联</view>
				</view>
			</uni-badge>
			<uni-badge class="uni-badge-left-margin" :text="value6" absolute="rightTop" size="small" type="error">
				<view class="box bgc1">
					<view class="appicon">
						<image src="../../static/tabbarimg/appiconpic.png" mode=""></image>
					</view>
					<view class="appname">应用名称</view>
				</view>
			</uni-badge>
		</view>
		<!-- 公告 -->
		<view class="Notice">
			<view class="example-body">
				<uni-notice-bar :show-get-more="true" :show-icon="true" :single="true" more-text="查看更多" text="最新公告"
					@getmore="getMore" />
			</view>
			<view class="Notice-content" v-for="(item,index) in notice" :key="index">
				<view class="Notice-sec">{{item.title}}</view>
				<view class="Notice-data">{{item.updateTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				// 轮播
				lists: [{
						image: 'https://liangcang-material.alicdn.com/prod/upload/3916be5165cb4d4aadae49a5a34400e6.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://liangcang-material.alicdn.com/prod/upload/1ab0ce94f41c4e7ca4126d5d1b6717f6.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://liangcang-material.alicdn.com/prod/upload/7438aaf338ce4a90b30a2806a3fee785.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗'
					},

				],
				list: [],
				// 应用角标
				value: 1,
				value2: 2,
				value3: 0,
				value4: 0,
				value5: 5,
				value6: 0,
				// 公告内容
				notice: ''
			}
		},
		mounted() {
			// const timer = setInterval(() => {
			// 	if (this.value >= 199) {
			// 		clearInterval(timer)
			// 		return
			// 	}
			// 	this.value++
			// }, 100)
			// let img = this.lists.image
			// console.log(this.lists.image)
		},
		methods: {
			selectedBanner(item, index) {
				console.log('🥒', item, index)
			},
			// 跳转到OA系统
			oasystem(e) {
				uni.navigateTo({
					url: "../oasystem/oasystem"
				})
			},
			// 跳转到新闻详情
			newdetails(){
				uni.navigateTo({
					url:'../newdetail/newdetail'
				})
			},
			// 公告查看更多
			getMore() {
				uni.showToast({
					title: '暂无更多',
					icon: 'none'
				})
			},
			// 公告内容
			noticed() {
				this.$request.get('/platform/announcement/list')
					.then(res => {
						console.log(res.data.rows)
						this.notice = res.data.rows
						console.log(this.notice)
					})
			},
			// 新闻内容
			news() {
				this.$request.get('/platform/news/list')
					.then(res => {
						console.log(res.data)
						this.list = res.data.rows
						// console.log(this.notice)
					})
			}
		},
		created() {
			this.noticed()
			this.news()
		}
	}
</script>

<style lang="scss">
	* {
		// border: 1px solid;
	}

	.uni-badge-left-margin {
		margin-top: 10px;
	}

	.appbox {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #EFEFF4;
		padding: 15rpx 50rpx 30rpx 50rpx;

		.box {
			width: 155rpx;
			height: 80rpx;
			padding: 20rpx;
			justify-content: center;
			align-items: center;
			text-align: center;
			background-color: #1BC1FE;
			border-radius: 20rpx;
			color: #fff;
			font-size: 12px;

			.appicon {
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(0, 0, 0, .1);
				border-radius: 100%;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 10rpx;
				}
			}

			.appname {
				// margin: 50rpx 0 0 20rpx;
				float: right;
			}
		}

		.bgc1 {
			background-color: #21C934;
		}

		.bgc2 {
			background-color: #1E76FE;
		}
	}

	.Notice {
		margin: 70rpx 0;

		.Notice-content {
			padding: 10rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			color: #6b6b6b;

			.Notice-sec {
				padding: 30rpx 0 5rpx 0;
				font-size: 30rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.Notice-data {
				font-size: 24rpx;
				text-align: right;
			}
		}
	}
</style>
